<template>
    <n-icon-wrapper v-if="useWrapper" v-bind="wrapperProps">
        <n-icon v-bind="iconProps" />
    </n-icon-wrapper>
    <n-icon v-else v-bind="iconProps"></n-icon>
</template>

<script setup lang="ts">
import type { IconProps } from "./types"
import { findIcon, isObject, isString } from "@/utils"

const props = withDefaults(defineProps<IconProps>(), {})

const useWrapper = computed(() => isObject(props.wrapper))

const wrapperProps = computed(() => {
    const { wrapper = {} } = props
    const { color, size, radius } = wrapper
    return {
        size,
        color,
        borderRadius: radius
    }
})

const iconProps = computed(() => {
    const { color, depth, size, icon } = props
    let component
    if (isString(icon)) {
        component = findIcon(icon as string)
    } else {
        component = icon as Component
    }
    return { size, color, depth, component }
})
</script>
